<html>

<head>
    <title>关于</title>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="../components/element-ui/2.12.0/theme-chalk/index.css">
    <style>
      .about { background: #FFF; border-radius: 10px; overflow: hidden; width: 300px;margin: auto;}
      .about_title { text-align: center; position: relative; margin: 20px; }
      .about_title:before { content: ""; width: 25%; height: 2px; background: #000; position: absolute; left: 0; bottom: 8px }
      .about_title:after { content: ""; width: 25%; height: 2px; background: #000; position: absolute; right: 0; bottom: 8px }
      .about_row { line-height: 30px; padding: 10px; }
      .about_row p { background: #f6f6f6; margin: 5px 0; padding-left: 10px; border-radius: 5px; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px 0px; }
    </style>
</head>
<body>
<div id="app">
  <div class="about">
    <h2 class="about_title">关于</h2>
    <div class="about_row">
      <p>职业：{{professional}}</p>
      <p>地址：{{address}}</p>
      <p>邮箱：{{email}}</p>
    </div>
  </div>
</div>
<!--引入vue -->
<script src="../components/vue/2.6.10/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../components/element-ui/2.12.0/index.js"></script>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            professional: 'JAVA 软件设计师',
            address : '深圳市',
            email : 'yanming_work@163.com'
        },
        methods: {

        }
    });
</script>

</body>

</html>
